<template>
  <div>
    <div class="box" v-if="btnFlags">
      <div class="search">
        <div class="search-hd" @click="menuBtn">
          <span class="iconfont icon-caidan"></span>
        </div>
        <van-popup
          v-model="show"
          position="left"
          :style="{ height: '100%' }"
          :overlay-style="{ width: '100%' }"
        >
          <menu-data
            @toSetup="toSetup"
            @signOut="signOut"
            @historyTo="historyTo"
          ></menu-data>
        </van-popup>
        <div class="search-son" @click="search">
          <span class="iconfont icon-sousuoxiao"></span>
          <span>搜索菜谱、热量和用户</span>
        </div>
        <div class="search-hd">
          <span class="iconfont icon-tongzhi"></span>
        </div>
      </div>
    </div>

    <router-view
      @shoucang="shoucang"
      @signOut="signOut"
      @btnFlag="btnFlag"
      @commentBtn="commentBtn"
      :collectionList="collectionList"
      @toFavoritesMenu="toFavoritesMenu"
      @CategoryPage="CategoryPage"
      @signInbtn="signInbtn"
      @signOuts="signOuts"
      @baochu="baochu"
      @toMycaid="toMycaid"
    ></router-view>

    <TableData v-if="btnFlags" @toEstablishView="toEstablishView"></TableData>
  </div>
</template>

<script>
import MenuData from "./components/menuData.vue";
import TableData from "./components/tableData.vue";
export default {
  data() {
    return {
      btnFlags: false,
      show: false,
      collectionList: [],
    };
  },
  methods: {
    signInbtn(phone){
      if(phone!=null){
        this.btnFlags = true;
      }  
    },
    btnFlag() {
      this.btnFlags = false;
    },
    commentBtn() {
      this.btnFlags = false;
    },
    menuBtn() {
      this.show = true;
    },
    toSetup() {
      this.show = false;
      this.btnFlags = false;
    },
    signOut() {
      this.btnFlags = true;
    },
    toFavoritesMenu() {
      this.btnFlags = false;
    },
    historyTo() {
      this.btnFlags = false;
    },
    CategoryPage(){
      this.btnFlags = false;
    },
    signOuts(){
      this.btnFlags = false;
    },
    toEstablishView(){
      this.btnFlags = false;
    },
    baochu(){
      this.btnFlags = true;
    },
    toMycaid(){
      this.btnFlags = false;
    },

    shoucang(add) {
      console.log(4);
      if (add[0] == true) {
        this.collectionList.unshift(
          JSON.parse(window.localStorage.getItem("shoucangLists"))[0]
        );
      } else {
        let index = this.collectionList.findIndex((item) => item.id == add[1]);
        this.collectionList.splice(index, 1);
      }
    },

    search() {
      this.$router.push({
        path: "searchView"
      });
      this.btnFlags = false;
    },
  },
  components: { TableData, MenuData },
};
</script>

<style>
@import "./assets/css/public.css";
.box {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: white;
}
.search {
  padding: 10px 16px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  align-items: center;
}
.search .search-son {
  width: 70%;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 16px;
  line-height: 40px;
  padding: 0 10px;
}
.search .search-son span {
  color: #999;
}
.search .search-son span:nth-child(1) {
  margin-right: 14px;
}
.search .search-son span:nth-child(2) {
  font-size: 14px;
}
.search .search-hd {
  width: 10%;
}
.search .search-hd span {
  font-size: 25px;
  margin: 0 auto;
}
</style>